<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebAPI</title>
</head>
<body>
    <!-- <div class="one" id="the-id">hello</div>

    <script>
        // 注意：querySelector参数就是一个CSS选择器（注意带有单引号）
        // 可以使用之前在CSS学的任意一种选择器来选中元素。
        //let div = document.querySelector('div');
        //let div = document.querySelector('.one');
        let div = document.querySelector('#the-id');
        console.log(div);
        // dir可以将元素以对象形态打印出来
        console.dir(div);

    </script> -->

    <!-- <div>hello1</div>
    <div>hello2</div>
    <div>hello3</div>

    <script>
        // 获取多个元素,返回值是数组
        let divs = document.querySelectorAll('div');
        console.log(divs);
    </script> -->

    <!-- <script>
        // 此时选择结果不唯一！！（不要忘记单引号！！）
        let div = document.querySelector('div');
        console.log(div);
        // dir可以将元素以对象形态打印出来
        console.dir(div);
        
    </script> -->

    <!-- <div>hello</div>
    <script>
        // 想让div处理鼠标点击事件
        let div = document.querySelector('div');
        // click是点击事件
        // onclick 属性就是针对click这个点击事件提前准备好的事件处理程序
        div.onclick = function() {
            console.log('按下鼠标');
        }
        // 多点几下就打印多个，但是会把相同记录进行合并

        // 想让鼠标移动
        div.onmousemove = function() {
            console.log('鼠标移动');
        }

        // 鼠标进来了
        div.onmouseenter = function() {
            console.log('鼠标进来了');
        }

        // 鼠标出去
        div.onmouseleave = function() {
            console.log('鼠标出去了');
        }
    </script> -->

    <!-- 获取/修改元素内容 -->
    <!-- <div>
        <h1>hello Xianmeng!</h1>
    </div>
    <script>
        // 先选中div
        let div = document.querySelector('div');
        // 获取元素内容
        console.log(div.innerHTML);

        // 通过给该属性赋值来起到修改的作用！
        div.onclick = function() {
            // 在这里赋值，不仅仅能够使文本，还可以是一个html片段
            //div.innerHTML = 'hello!';
            div.innerHTML = '<button>这是按钮</button>';
        }
    </script> -->

    <!-- 获取/修改元素属性 -->
    <!-- <img src="hu.jpg" width="250px">
    
    <script>
        let img = document.querySelector('img');
        console.log(img.src);
        console.log(img.width);
        // alt是img标签自带的属性，没有手动指定则是空字符串，不是undefined
        console.log(img.alt);

        // 修改属性
        img.onclick = function() {
            img.src = 'img/female.png';
        }

    </script> -->

    <!-- 表单元素获取/修改 -->
    <!-- <input type="text">
    <button>按我触发一个函数</button>

    <script>
        let input = document.querySelector('input');
        let button = document.querySelector('button');
        button.onclick = function() {
            // 通过innerHTML根本那不到输入框中的内容！
            // 因为input是一个单标签！
            console.log(input.innerHTML);

            // 使用value属性来获取输入的值
            console.log(input.value);
        }
    </script> -->


    <!-- 显示密码 -->
    <!-- <input type="password">
    <button>显示密码</button>

    <script>
        let input = document.querySelector('input');
        let button = document.querySelector('button');
        button.onclick = function() {
            // 显示密码与隐藏密码可以根据点击交换 + 文字变换
            if(input.type == 'password') {
            input.type = 'text';
            button.innerHTML = '隐藏密码';  // 使用innerHTML来修改！！
            } else if(input.type == 'text') {
            input.type = 'password';
            button.innerHTML = '显示密码';
            } else {
                alert('type 错误！')
            }
        }
    </script> -->


    <!-- 点击计数+两个按钮 -->
    <!-- 通过value设置初始值 -->
    <!-- <input type="text" value="0"> 
    <button id="minus">-</button>
    <button id="add">+</button>
    
    <script>
        let input = document.querySelector('input');
        let addBut = document.querySelector('#add');
        let minusBut = document.querySelector('#minus');

        // 开始进行操作
        addBut.onclick = function() {
            // 这样子是字符串拼接效果
            // 所以要先把字符串转成整数，Java使用Integer.parseInt！！
            // JS中也有parseInt，是一个全局函数
            //(不仅只是针对字符串操作，也能针对其他类型操作，如浮点结果转整数)
            //let oldValue = parseInt(input.value);

            // 还有一个简单的操作转为整数（就是加正号，因为字符串必定没有正负之分）！
            let oldValue = +input.value;

            //let oldValue = input.value;
            oldValue += 1;
            input.value = oldValue;
        }

        minusBut.onclick = function() {
            //let oldValue = parseInt(input.value);
            let oldValue = +input.value;
            oldValue -= 1;
            input.value = oldValue;
        }

    </script> -->


    <!-- 操作复选框 -->
    <!-- <h3>请选择你最爱的大帅哥！</h3>
    <div>
        <input type="checkbox" class="handsome"> 蔡徐坤
    </div>
    <div>
        <input type="checkbox" class="handsome"> 王鹤棣
    </div>
    <div>
        <input type="checkbox" class="handsome"> 陈飞宇
    </div>
    <div>
        <input type="checkbox" class="handsome"> 陈哲远
    </div>
    <div>
        <input type="checkbox" class="all"> all
    </div> -->

    <!-- 现在想要实现选择all就自动选择其他的所有，取消all就自动取消其他的所有选项 -->
    <!-- 复选框的选择状态可以通过checked属性来进行设置 -->
<!-- 
    <script>
        let all = document.querySelector('.all');
        let handsomes = document.querySelectorAll('.handsome');

        // 先针对all进行处理,当用户点击all就会对以上所有的帅哥进行选中/取消
        all.onclick = function() {
            // 打印以下all的状态
            console.log('all.checked:' + all.checked);
            for(let i = 0; i < handsomes.length; i++) {
                // 修改状态
                handsomes[i].checked = all.checked;
            }
        }

    </script> -->

    
    <!-- 行内样式 :style设置-->
    <!-- <h3 style="font-size: 20px">你要好好努力喽！</h3>

    <script>
        let h3 = document.querySelector('h3');
        h3.onclick = function() {
            // 每次点击一下就把文字放大10px
            // 先获取当前大小：
            // 注意：CSS使用脊柱命名法，而JS中的属性命名是小驼峰命名法（相当于等价转换！！
            let oldSize = h3.style.fontSize;
           // console.log(oldSize);
           // 转成整数加10,但是注意oldSize中的值不是纯数字，而是带有px单位/字母的
           // 但是：parseInt是从左往右进行转换的，转换过程中如果遇到了非数字的字母就停止转换！！
           oldSize = parseInt(oldSize);
           oldSize += 10;

           // 在设置样式值的时候，务必要带上单位！！否则没有起到修改作用
           h3.style.fontSize = oldSize + 'px';
        }
    </script> -->



    <!-- 开灯关灯/夜间模式 -->
    <!-- 开灯时，把背景设为浅色，文字设成深色
    关灯时，把背景设成深色，文字设成浅色 -->

    <!-- <div class="light">
        这是临时的一大段话！Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti recusandae quis animi quas adipisci voluptatibus et? Est ducimus repellendus necessitatibus perspiciatis animi incidunt, totam amet, minus atque molestiae ad pariatur.
        这是临时的一大段话！Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti recusandae quis animi quas adipisci voluptatibus et? Est ducimus repellendus necessitatibus perspiciatis animi incidunt, totam amet, minus atque molestiae ad pariatur.
        这是临时的一大段话！Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti recusandae quis animi quas adipisci voluptatibus et? Est ducimus repellendus necessitatibus perspiciatis animi incidunt, totam amet, minus atque molestiae ad pariatur.
    </div>  -->

    <!-- <style>
        /* 开灯的情况 */
        .light {
            color: black;
            background-color: white;
        }
        /* 关灯状态 */
        .dark {
            color: white;
            background-color: black;
        }
        /* 要想最后达到整个页面都变化，而不只是文字区域变化，那就重新设置自身以及父亲高度100% */
        /* 注意是在style中进行设置的!! */
        div,body,html {
            height: 100%;
        }
    </style> -->

    <!-- <script>
        // 进行黑白切换
        let div = document.querySelector('div');
        div.onclick = function() {
            // 注意：此处JS中的className就是上面html开始标签中的class属性
            // 大多数情况下应该是一样的，但是也有特殊情况，如此处的class
            // JS中class也是关键字，用于定义类（JS有类，可以用可以不用）；在ES6之前class是保留字
            // 关键字不能作为属性名、变量名、函数名...
            if(div.className == 'dark') {
                div.className = 'light';
            } else if(div.className == 'light') {
                div.className = 'dark';
            } else {
                alert('class 错误！');
            }
        }
    </script> -->


    <!-- 新增节点 -->
    <!-- <div class="parent">
        <div>11</div>
        <div>22</div>
        <div>33</div>
    </div>

    <script>
        let div = document.querySelector('.parent');
        let childDiv = document.createElement('div');
        // 理论上来说：每个变量创建前都是要加let的
        // 如果不加let，就相当于创建了全局变量，语法上没有错误，但是不一定符合我们的要求。
        childDiv.innerHTML = '00';  // 修改or赋值！
        div.appendChild(childDiv);  // 不要忘记加到dom树上！！
    </script> -->


    <!-- 删除节点 -->
    <div class="parent">
        <div>11</div>
        <div>22</div>
        <div class="toDelete">33</div>
    </div>

    <script>
        let div = document.querySelector('.parent');
        let toDelete = document.querySelector('.toDelete'); // 类前面不要忘记.
        div.removeChild(toDelete);
    </script>



</body>
</html>